import React from 'react';
import { Row, Col, Form, Input, DatePicker, Icon } from 'antd';
import Button from '../ButtonPc';
import styles from '../index.less';

const CertificateItem = ({ form, index, i, remove, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>证书{i + 1}</div>
                <Icon
                    type="close-circle"
                    theme="filled"
                    style={{ fontSize: 16, color: '#49536C' }}
                    onClick={() => remove(index)}
                />
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="获得证书时间">
                        {getFieldDecorator(`certificateCertificateTime[${index}]`, {
                            rules: [{ required: true, message: '请选择获得证书时间' }]
                        })(<DatePicker style={{ width: '100%' }} placeholder="请选择获得证书时间" />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="证书名称">
                        {getFieldDecorator(`certificateCertificateName[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入证书名称',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入证书名称" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const Certificate = ({ form }) => {
    const { getFieldDecorator } = form;

    const add = () => {
        const certificateKeys = form.getFieldValue('certificateKeys');
        const nowId = certificateKeys[certificateKeys.length - 1] + 1 || 0;
        const nextKeys = certificateKeys.concat(nowId);
        form.setFieldsValue({
            certificateKeys: nextKeys
        });
    };

    const remove = React.useCallback(k => {
        const certificateKeys = form.getFieldValue('certificateKeys');
        form.setFieldsValue({
            certificateKeys: certificateKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('certificateKeys', { initialValue: [] });
    const certificateKeys = form.getFieldValue('certificateKeys');

    return (
        <>
            {certificateKeys.map((key, i) => (
                <CertificateItem form={form} key={key} index={key} i={i} remove={remove} />
            ))}
            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={add} disabled={certificateKeys.length >= 10}>
                    <Icon type="plus" /> 添加证书
                </Button>
            </div>
        </>
    );
};

export default Certificate;
